<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的模板</title>

</head>

<body>


    <div id="app">
        <button @click="getJoke">获取随机笑话</button> {{joke}}
    </div>


</body>

</html>


<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script>
    // https://autumnfish.cn/api/joke
    const app = new Vue({
        el: '#app',
        data: {
            joke: '很好笑的笑话',
        },
        methods: {
            getJoke() {
                var that = this;
                axios.get('https://autumnfish.cn/api/joke').then(
                    function(response) {
                        that.joke = response.data;
                    }
                )


            },
        },

    })
</script>